<!--
*@Author: QWP
*@Description: 顶部头像的下拉菜单
*@Date: 2023-07-04 16:55:25
-->
<template>
  <a-dropdown>
    <a-space>
      <a-avatar :size="38"
        :style="avatarStyle"
        shape="circle">
        {{ (userName || '')[0] }}
      </a-avatar>
      <a
        class="ant-dropdown-link"
        style="padding-right: 20px; font-size: 16px; color: #FFFFFF;"
        @click.prevent>
        {{ userName }}
        <!-- <DownOutlined /> -->
      </a>
    </a-space>
    <template #overlay>
      <a-menu @click="handelSelect">
        <a-menu-item v-for="item in state.dropData"
          :key="item.key">
          {{ item.label}}
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>

  <!-- 修改密码 -->
  <UpdatePass
    v-model:open="state.showUpdatePass"
    :closable="!getIsMustChange"
    :hideBtns="isMustChange == true ? ['close'] : []"
    @cancel="state.showUpdatePass = false"
    @success="state.showUpdatePass = false" />
  
  <!-- 个人设置 -->
  <Setting v-model:open="openSet"/>

  <u-dialog v-model:open="showBarcode"
    title="扫描下载"
    :maskClosable="true"
    :footer="false"
    :hideBtns="['submit', 'close']">
    <div class="f-flex-row"
      style="justify-content: center;">
      <a-qrcode
        error-level="H"
        :value="barcodeValue"
        :icon="barIocn"
      />
    </div>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLoginStore, useEmergencyStore } from '@/store'
import UpdatePass from '@/views/index/component/updatePass/UpdatePass.vue'
import { alertC, urlFile, isValue, notificationC, messageC } from '@/util/common'
import Setting from './setting/Setting.vue'
import { storeToRefs } from 'pinia'
import * as loginApi from '@/service/login'
import { notification } from 'ant-design-vue'

const loginStore = useLoginStore()
const { isMustChange, userInfo } = storeToRefs(loginStore)
const emergencyStore = useEmergencyStore();
const router = useRouter()
const route = useRoute()

const emits = defineEmits(['click'])

// 是否强制修改密码
const getIsMustChange = ref<boolean>(isMustChange)

const userName = computed(() => userInfo.value['name'] || '系统测试人员')

const barcodeValue = computed(() => `${window.origin}/#/AppDownload`)
const barIocn = urlFile('app/app_logo_192.png')

const avatarStyle = {
  marginTop: '-4px',
  backgroundColor: '#00a2ae', 
  fontSize: '16px',
  border: 'none'
}

// 相关数据
const openSet = ref<boolean>(false);
const showBarcode = ref<boolean>(false)
const state = reactive({
  showUpdatePass: false,
  dropData: [
    { key: '2', label: '修改密码' },
    // { key: '4', label: '资源下载' },
    { key: '3', label: '退出登录' },
    { key: '10', label: '客户端下载' },
    { key: '8', label: '设置' },
    // { key: '6', label: '常规首页' },
    // { key: '5-1', label: '风险等级一' },
    // { key: '5-2', label: '风险等级二' },
    // { key: '5-3', label: '风险等级三' },
    // { key: '5-4', label: '风险等级四' },
    // { key: '7', label: '风险新首页' },
  ]
})

onMounted(() => {
  if(isMustChange.value == true) {
    state.showUpdatePass = true
  }
})

const handelSelect = ({item, key, keyPath}) => {
  if(key == '2') {
    state.showUpdatePass = true
  }
  // 退出登录
  else if(key == '3') {
    logOut();
  }
  // 资源下载
  else if(key == '4') {
    let tRoute = router.resolve({
      path: '/Resource'
    })
    window.open(tRoute.href, '_blank')
  }
  else if(key.startsWith('5-')) {
    emergencyStore.setLevel(key.replace('5-', ''))
    emits('click', { item, key, keyPath })
  }
  else if(key == '6') {
    emergencyStore.setLevel('')
    emits('click', { item, key, keyPath })
  }
  else if(key == '7') {
    router.push({
      path: '/TransitIndex/EmergencyIndexNew'
    })
  }
  // 个人设置
  else if(key == '8') {
    openSet.value = true;
  }
  else if(key == '10') {
    showBarcode.value = true
  }
}

// 退出登录
const logOut = async () => {
  await alertC('确认退出登录?', "confirm")
  try {
    const res =  await loginApi.logout({
      userid: userInfo.value['userId'],
      clientType: 'web'
    })
    if(res.code == 0) {
      loginStore.setRefreshToken('')
      loginStore.setToken('')
      
      notification.warning({
        message: '提示',
        description: '退出成功！',
        placement: 'topLeft'
      });
      setTimeout(() => {
        router.push('/')
      }, 500);
    }
    else {
      messageC(res.data.msg, "error")
    }
  } catch (error) {}
}
</script>
